import styled from 'styled-components';

interface MyRingStyledPropsType {
  percent: number;
}

export const MyRingStyled = styled.div<MyRingStyledPropsType>`
  /* 主要的思路是 使用锥形渐变给div一个背景，然后使用mask遮挡中间部分，这样就变成一个圆环了，最后用 before和after处理一下 圆环进度开始和结束位置 */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .shadow {
    width: 140px;
    height: 140px;
    position: relative;
    border-radius: 50%;
    background: conic-gradient(#1989fa 0%, #00f7ff ${(props) => props.percent}%, #09295b 0%, #09295b 100%);
    mask: radial-gradient(transparent 44px, #000 45px);
    -webkit-mask: radial-gradient(transparent 60px, #000 61px);
  }
  .shadow::before {
    content: '';
    position: absolute;
    left: 48px;
    top: 0px;
    width: 5px;
    height: 5px;
    /* background: #ddff5c; */ 
    border-radius: 50%;
  }
  .shadow::after {
    content: '';
    position: absolute;
    left: -1px;
    top: 44px;
    width: 8px;
    height: 8px;
    /* background: #85ea8e; */
    border-radius: 50%;
  }
`;
